import { PageContainer } from '@ant-design/pro-components';
import { Card } from 'antd';
import React from 'react';

/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */
const InfoCard = ({ title, href, index, desc }) => {
  return (
    <div
      style={{
        // backgroundColor: '#999999',
        boxShadow: 'rgba(0, 0, 0, 0.08) 0px 6px 16px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px -4px, rgba(0, 0, 0, 0.05) 0px 9px 28px 8px',
        borderRadius: '8px',
        fontSize: '18px',
        color: '#666666',
        lineHeight: '24px',
        padding: '16px 19px',
        minWidth: '240px',
        flex: 1,
      }}
    >
      <div
        style={{
          display: 'flex',
          gap: '4px',
          alignItems: 'center',
        }}
      >
        {/* <div
          style={{
            width: 48,
            height: 48,
            lineHeight: '22px',
            backgroundSize: '100%',
            textAlign: 'center',
            padding: '8px 16px 16px 12px',
            color: '#FFF',
            fontWeight: 'bold',
            backgroundImage:
              "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
          }}
        >
          {index}
        </div> */}
        <a href={href} target="_blank" rel="noreferrer">
          <div
            style={{
              fontSize: '18px',
              color: '#5582F3',
              paddingBottom: 16,
              fontWeight: 'bold'
            }}
          >
            {title}
          </div>
        </a>

      </div>
      <div
        style={{
          fontSize: '14px',
          color: '#666666',
          textAlign: 'justify',
          lineHeight: '24px',
          marginBottom: 8,
        }}
      >
        {desc}
      </div>
    </div>
  );
};

const Home = () => {
  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          backgroundImage: 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
        }}
      >
        <div
          style={{
            backgroundPosition: '100% -30%',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '274px auto',
            backgroundImage:
              "url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
          }}
        >
          <div
            style={{
              fontSize: '20px',
              color: '#333333',
              fontWeight: 'bold'
            }}
          >
            应用列表
          </div>
          <p
            style={{
              fontSize: '14px',
              color: '#666666',
              lineHeight: '22px',
              marginTop: 16,
              marginBottom: 32,
              width: '65%',
            }}
          >
          </p>
          <div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: 16,
            }}
          >
            <InfoCard
              index={1}
              href="https://blog.jielihaofeng.online"
              title="借力好风Blog"
              desc="个人博客"
            />
            <InfoCard
              index={2}
              title="SyncTV"
              href="https://synctv.jielihaofeng.online"
              desc="在线同时观影的平台"
            />
            <InfoCard
              index={3}
              title="Alist"
              href="https://alist.jielihaofeng.online"
              desc="网盘聚合平台"
            />
            <InfoCard
              index={4}
              title="1panel"
              href="https://1panel.jielihaofeng.online"
              desc="服务器管理控制台"
            />
            <InfoCard
              index={5}
              title="VoceChat"
              href="https://vocechat.jielihaofeng.online"
              desc="即时通讯平台，支持移动端"
            />
            <InfoCard
              index={6}
              title="Telegraph Image"
              href="https://telegraph-image.jielihaofeng.online"
              desc="图床平台"
            />
            <InfoCard
              index={7}
              title="黑铁教程"
              href="https://yntx-it.github.io/yntx-black-iron-tutorial-fronted"
              desc="程序员黑铁教程、面试宝典"
            />
            <InfoCard
              index={7}
              title="后台管理（暂不开放）"
              href="https://admin.jielihaofeng.online"
              desc="网站后台管理"
            />
          </div>
        </div>
      </Card>
    </PageContainer>
  );
};

export default Home;
